<template>
  <section class="blog-one">
    <div class="container">
      <div class="row">
        <div class="col-lg-4 col-md-6 col-sm-12 wow fadeInUp" v-for="item in list">
          <div class="blog-one__single">
            <div class="blog-one__image" @click="gotoDetail(item.id)">
              <img :src="item.cover" alt="">
              <a class="blog-one__more-link"><i class="fa fa-link"></i>
                <!-- /.fa fa-link --></a>
            </div><!-- /.blog-one__image -->
            <div class="blog-one__content">
              <ul class="list-unstyled blog-one__meta">
                <li><a href="#">{{ item.publishTime }}</a></li>
                <li><a href="#">{{ item.visitNum }} 次浏览</a></li>
              </ul><!-- /.list-unstyled -->
              <h3 class="blog-one__title two-line-ellipsis">
                <nuxt-link :to="`/blog-details?id=${item.id}`">{{ item.title }}</nuxt-link>
              </h3><!-- /.blog-one__title -->
              <nuxt-link :to="`/blog-details?id=${item.id}`" class="blog-one__link">查看详情</nuxt-link>
              <!-- /.blog-one__link -->
            </div><!-- /.blog-one__content -->
          </div><!-- /.blog-one__single -->
        </div><!-- /.col-lg-4 -->
      </div><!-- /.row -->
      <div class="post-pagination">
        <a href="#" @click.prevent="handlePageChange(currentPage - 1)" :class="{ disabled: currentPage === 1 }">
          <i class="fa fa-angle-double-left"></i>
        </a>
        <a
          v-for="page in pages"
          :key="page"
          href="#"
          @click.prevent="handlePageChange(page)"
          :class="{ active: currentPage === page }"
        >
          {{ page }}
        </a>
        <a href="#" @click.prevent="handlePageChange(currentPage + 1)"
           :class="{ disabled: currentPage === totalPages }">
          <i class="fa fa-angle-double-right"></i>
        </a>
      </div>
    </div><!-- /.container -->
  </section>
</template>

<script>
import apis from "@/apis/apis";

export default {
  name: "Blog",
  data() {
    return {
      totalPages: undefined,
      currentPage: undefined,
      maxVisiblePages: 4,
      params: {
        'page': 1,
        'limit': 3,
        'order': 'desc'
      },
      list: [],
      pages: []
    }
  },
  computed: {},
  methods: {
    gotoDetail(id) {
      this.$router.push(`/blog-details?id=${id}`);
    },
    handlePageChange(page) {
      if (page < 1 || page > this.totalPages || page === this.currentPage) {
        return;
      }
      this.$emit('page-change', page);
    },
    displayedPages() {
      const pages = [];
      const halfVisible = Math.floor(this.maxVisiblePages / 2);
      let start = Math.max(1, this.currentPage - halfVisible);
      let end = Math.min(this.totalPages, start + this.maxVisiblePages - 1);

      if (end - start + 1 < this.maxVisiblePages) {
        start = Math.max(1, end - this.maxVisiblePages + 1);
      }

      for (let i = start; i <= end; i++) {
        pages.push(i);
      }
      this.pages = pages;
    },
    getData(keyword) {
      if (keyword !== undefined) {
        this.params.title = keyword
      }
      apis.getNewsData(this.params).then(res => {
        this.list = res.data.list
        this.totalPages = res.data.totalPage
        this.currentPage = res.data.currPage
        this.displayedPages()
      })
    }
  }
}
</script>

<style scoped>
.two-line-ellipsis {

  display: -webkit-box;

  -webkit-box-orient: vertical;

  -webkit-line-clamp: 2;

  overflow: hidden;

  text-overflow: ellipsis;

}
</style>
